<template>
  <div>
    <div class="table-seatch-flex">
      <div class="table-search">
        <div class="search-left">
          <div class="search-item">
            <span class="search-label">资源方</span>
            <div class="search-input">
              <a-select
                  ref="select"
                  style="width: 100%"
                  :bordered="false"
                  placeholder="请选择资源方"
                  :options="areas"
              >
              </a-select>
            </div>
          </div>
          <div class="search-btn">
            <div class="search-icon">
              <a-cascader
                  v-model:value="value"
                  placeholder="Please select"
                  :options="selectOption"
                  :fieldNames="{
                  label: 'name',
                  value: 'key'
                }"
                  @change="handleChange"
              >
                <PlusOutlined/>
              </a-cascader>
            </div>
            <a-button class="search-btn2" @click="resetCustom">
              <template #icon>
                <RedoOutlined/>
              </template>
              重置
            </a-button>
            <a-button class="search-btn1" @click="searchTable">查询</a-button>
            <!--          <a-button type="text">更多筛选条件</a-button>-->
          </div>
        </div>
      </div>
      <div class="search-btn">
        <a-button class="search-btn1" @click="addFrom">
          <template #icon>
            <PlusOutlined />
          </template>
          新增</a-button>
        <a-button class="border-btn" @click="allGanttExport" v-preventReClick>
          <template #icon>
            <UploadOutlined />
          </template>
          导出</a-button>
      </div>
    </div>
    <div class="table-box">
      <div class="table-btn-flex">
        <div class="table-head-btn">
          <a-radio-group v-model:value="activeKey" style="margin: 8px">
            <a-radio-button value="1">调度优化</a-radio-button>
            <a-radio-button value="2">尝试优化</a-radio-button>
          </a-radio-group>
          <div class="right-btn" v-if="activeKey === '1'">
            <div class="cascader-box">
              <AlignLeftOutlined :style="{marginTop: '10px', marginLeft: '10px'}"/>
              <a-cascader
                  :bordered="false"
                  v-model:value="value"
                  multiple
                  :options="options"
                  style="width: 100%"
                  placeholder="视图"
              >
                <template #tagRender="data">
                  <a-tag :key="data.value" color="blue">{{ data.label }}</a-tag>
                </template>
              </a-cascader>
            </div>
<!--            <a-button class="search-btn2" @click="addFrom">-->
<!--              <template #icon>-->
<!--                <PlusOutlined />-->
<!--              </template>-->
<!--              新增-->
<!--            </a-button>-->
          </div>
        </div>
      </div>
      <div class="table-div">
        <SchedulingGantt v-if="activeKey === '1'" :viewVal="value"
                         :allExport="allExport"
                         @exportTable="exportTable"
                         @getImgData="getImgData"
                         :ganttData="ganttData"
                         @updatePlanId="updatePlan"/>
        <TrialTimelineGantt v-if="activeKey === '2'" :activeKey="activeKey" :planId="planId" @updateData="updateData"/>
      </div>
    </div>
    <AddSchedulingFrom ref="addScheduling" @saveMemForm="onSavePlan"/>
  </div>
</template>

<script setup>
import {getCurrentInstance, ref, watch} from 'vue';
import SchedulingGantt from './components/SchedulingGantt/SchedulingGantt.vue'
import TrialTimelineGantt from "@/pages/LngScheduling/components/TrialTimelineGantt/TrialTimelineGantt.vue";
import AddSchedulingFrom from './components/AddSchedulingFrom/AddSchedulingFrom.vue'
import {PlusOutlined, AlignLeftOutlined, UploadOutlined, RedoOutlined} from '@ant-design/icons-vue';
import {message} from "ant-design-vue";
const activeKey = ref('1')
const { proxy  } = getCurrentInstance()
const options = ref([
  {
    value: 'a',
    label: '船维度甘特视图',
    children: []
  },
  {
    value: 'b',
    label: '货维度甘特视图',
    children: []
  },
  {
    value: 'c',
    label: '表格视图',
    children: []
  }
])
const value = ref([['a'], ['b'], ['c']])
const areas = ref([])
const selectOption = ref()
const handleChange = value => {
  console.log(`selected ${value}`);
};
const resetCustom = () => {}
const searchTable = () => {}
const ganttData = ref({})
const addScheduling = ref()
const addFrom = () => {
  addScheduling.value.showModal()
}
const onSavePlan = (val) => {
  console.log('传过来的数据val', val)
  if (val) {
    ganttData.value = val
  }
}
const updateData = () => {
  activeKey.value = '1'
}
const planId = ref('')
const updatePlan = (val) => {
  planId.value = val
}
/**
 * 所有甘特图还有图表导出
 * */
const allExport = ref(false)
const imgData = ref([])
const exportList = ref({
  pictureUrl: {
    shipUrl: '',
    sellerUrl: '',
    goodsUrl: ''
  },
  searchItem: '',
  ids: []
})
const getImgData = (val) => {
  imgData.value = []
  imgData.value.push(val)
  imgData.value.map(item => {
    if (item.name === '船舶排布') {
      exportList.value.pictureUrl.shipUrl = item.imgData
    }
    if (item.name === '资源方排布') {
      exportList.value.pictureUrl.sellerUrl = item.imgData
    }
    if (item.name === '货源排布') {
      exportList.value.pictureUrl.goodsUrl = item.imgData
    }
  })
  console.log('获取到的img图片地址', imgData.value)
  console.log('获取到的img图片地址exportList.value.pictureUrl', exportList.value.pictureUrl)
}
const exportTable = (val) => {
  if (val && val.length > 0) {
    val.map(item => {
      exportList.value.ids.push(item.id)
    })
  }
}
const allGanttExport = () => {
  console.log('实现了防抖哈A', exportList.value)
  allExport.value = true
  if (exportList.value.pictureUrl.goodsUrl && exportList.value.pictureUrl.shipUrl) {
    exportGanttTabel()
  }
}
const exportGanttTabel = () => {
  proxy.$api.postScheduilingPageGanttExport(exportList.value).then(res => {
    if (res.resultCode === 0) {
      message.success('导出成功')
      // 创建一个隐藏的链接元素用于下载
      let a = document.createElement('a');
      a.href = res.resultObject;
      // 模拟点击下载链接
      a.style.display = 'none';
      document.body.appendChild(a);
      a.click();
      // 清理下载链接元素
      document.body.removeChild(a);
    }
    allExport.value = false
  }).catch(_ => {
    allExport.value = false
  })
}
watch(() => exportList.value, (newVal) => {
  if (newVal.pictureUrl.goodsUrl && newVal.pictureUrl.shipUrl) {
    exportGanttTabel()
  }
}, {
  deep: true
})

</script>

<style lang="scss" scoped>
.table-seatch-flex {
  background: #ffffff;
  padding: 24px 0 0 0;
  margin-bottom: 24px;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  .table-search {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .search-left {
      display: flex;
      width: 100%;
      flex-wrap: wrap;
      .search-item {
        margin-left: 10px;
        border: 1px solid  #DCDEE0;
        height: 34px;
        line-height: 32px;
        display: flex;
        width: 320px;
        margin-bottom: 24px;
        position: relative;
        font-size: 14px;
        .search-label {
          display: block;
          line-height: 32px;
          color: #2C3749;
          padding: 0 12px;
          text-align: left;

        }
        .search-input {
          width: 247px;
          text-align: left;
        }
        .close-btn {
          position: absolute;
          top: -17px;
          right: -4px;
        }
      }
      .search-btn {
        margin-left:20px;
        display: flex;
        margin-bottom: 12px;
        .search-btn1 {
          background: #f5001d;
          border-radius: 2px;
          color: #fff;
          padding: 0 20px;
        }
      }
    }
    .search-right {
      display: flex;
      margin-top: 15px;
      .search-input {
        text-align: left;
      }
    }
  }
  .search-btn {
    margin-right:20px;
    display: flex;
    margin-bottom: 12px;
    .search-btn1 {
      background: #f5001d;
      border-radius: 2px;
      color: #fff;
      padding: 0 20px;
    }
  }
}
.table-box {
 // background: #ffffff;
  margin-bottom: 10px;
}
.table-btn-flex {
  width: 100%;
  display: flex;
  background: #ffffff;
  height: 96px;
  border-bottom: 1px solid #DCDEE0;
  .table-head-btn {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-top: 25px;
    padding: 0 20px;
  }
  .right-btn {
    margin-top: 5px;
    display: flex;
    .cascader-box {
      border: 1px solid #F5001D;
      height: 32px;
      line-height: 32px;
      margin-right: 8px;
      color: #F5001D;
      display: flex;
      min-width: 100px;
    }
  }
  .ant-radio-button-wrapper-checked {
    background: #0062AD;
    color: #ffffff;
  }
}
</style>
